<template>
  <div style="display: flex;flex-direction: row;justify-content: space-between;">
    <el-form :inline="true" :model="searchForm" ref="formRef" style="display: flex;flex-direction: row;">
      <el-form-item label="商品名称" prop="productName">
        <el-input v-model="searchForm.productName" placeholder="请输入商品名称" @keyup.enter="fetchList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchList">查询</el-button>
        <el-button @click="onReset(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-bottom: 10px" @click="router.push('/shop/product/add')">添加商品</el-button>
  </div>
  <el-table :data="state.tableData" border style="width: 100%">
    <el-table-column prop="index" label="序号" width="60px">
      <template #default="scope">
        {{ (state.pageNum - 1) * state.pageSize + scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column label="商品图片" width="86px">
      <template #default="scope">
        <el-image class="table-img" :src="scope.row.spuPhoto" fit="fill" />
      </template>
    </el-table-column>
    <el-table-column prop="spuName" label="商品名称" />
    <el-table-column prop="categoryName" label="商品类别名称" />
    <el-table-column prop="skuPrice" label="价格" />
    <el-table-column prop="spuBrand" label="品牌" />
    <el-table-column prop="saleCount" label="销量" />
    <el-table-column label="操作" width="320" fixed="right">
      <template #default="scope">
        <el-button type="primary" v-if="scope.row.publishStatus === 'void'"
          @click="updateStatus(scope.row.spuId, 'active')">上架</el-button>
        <el-button type="primary" v-if="scope.row.publishStatus === 'active'"
          @click="updateStatus(scope.row.spuId, 'void')">下架</el-button>
        <el-button type="primary" @click="router.push(`/shop/product/add?spuId=${scope.row.spuId}`)">编辑
        </el-button>
        <el-button type="danger" @click="handleDelete(scope.row.spuId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <Pagination :total="state.total" :limit="state.pageSize" :page-change="PageChange" />
</template>
<script lang="ts" setup>
import router from "@/router";
import { reactive, ref } from "vue";
import {
  deleteProduct,
  findProductList,
  updateProductPublishStatus,
} from "@/api/shop";
import Pagination from "@/components/pagination/index.vue";
import { ElMessage, FormInstance } from "element-plus";

const formRef = ref<FormInstance>();
const searchForm = reactive({
  productName: "",
});

const state = reactive({
  tableData: [],
  total: 0,
  pageNum: 1,
  pageSize: 10,
  searchParams: {},
});

const fetchList = () => {
  findProductList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    extraParamMap: {
      spuName: searchForm.productName,
    }
  }).then((res: any) => {
    state.total = res.data.total;
    state.tableData = res.data.rows;
  });
};
fetchList();

// 重置按钮
const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  fetchList();
};

// 上下架
const updateStatus = (spuId: number, status: "void" | "active") => {
  updateProductPublishStatus({
    spuId: spuId,
    publishStatus: status,
  }).then(() => {
    const msg = status === "void" ? "下架成功" : "上架成功";
    ElMessage.success(msg);
    fetchList();
  });
};

// 删除
const handleDelete = (spuId: number) => {
  deleteProduct({
    spuId,
  }).then(() => {
    ElMessage.success("删除成功");
    fetchList();
  });
};

// 分页
const PageChange = (page: number) => {
  state.pageNum = page;
  fetchList();
};
</script>
<style lang="scss" scoped>
.el-form .el-form-item:last-of-type {
  margin-bottom: 18px !important;
}
</style>
